<template>
  <div>
    <v-form
      ref="form"
      :lazy-validation="false"
    >
      <v-card flat>
        <v-card-text>
          <v-expansion-panels
            v-model="panel"
            multiple
            tile
          >
            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>订单基本信息</v-expansion-panel-header>
              <v-divider />
              <v-expansion-panel-content>
                <v-row align="center" class="pt-3">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">订单号：</div>
                      <v-col class="py-0">
                        <div class="d-flex align-center">
                          <SelectGroupcode v-model="formData.code_sign1" outlined/>
                          <span class="mx-1">-</span>
                          {{ dayjs(detailData.plan_date).format('YYYYMMDD') }}
                          <span class="mx-1">-</span>
                          客户代码
                        </div>
                      </v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <!-- <v-checkbox
                      v-model="panel"
                      label="自动生成团号"
                      hide-details
                      dense
                      class="mt-0 pt-0"
                    ></v-checkbox> -->
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">产品名称：</div>
                  <v-col>{{ detailData.foundation_prodcut_name }}</v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">始发地：</div>
                      <v-col>{{ detailData.foundation_prodcut_name }}</v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">目的地：</div>
                      <v-col>{{ detailData.foundation_prodcut_name }}</v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">接团日期：</div>
                      <v-col>{{ detailData.plan_date }}</v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">散团日期：</div>
                      <v-col>{{ detailData.back_date }}</v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">余位：</div>
                      <v-col>{{ detailData.remain_num }}</v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">行程天数：</div>
                      <v-col>{{ detailData.day_num }}天</v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">是否允许超员：</div>
                      <v-col>{{ detailData.remain_status == 1 ? '允许' : '不允许' }}</v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">信息类型：</div>
                      <v-col>{{ detailData.info_type_name }}</v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right"><small class="red--text mr-1">(必填)</small>订单人数：</div>
                      <v-col class="py-0">
                        <v-row align="center">
                          <v-col class="py-0 pr-0">
                            <v-text-field
                              v-model.number="formData.adult_num"
                              dense
                              type="number"
                              :rules="[rules.required]"
                              required
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">成人</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.bedkid_num"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">儿童</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.leader_num"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">领队</v-col>
                          <v-spacer />
                          <v-spacer />
                          <v-spacer />
                        </v-row>
                      </v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">订团日期：</div>
                      <v-col class="py-0"><el-date-picker v-model="formData.order_date" value-format="yyyy-MM-dd" size="small" type="date"></el-date-picker></v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="12" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">用房数量：</div>
                      <v-col class="py-0">
                        <v-row align="center">
                          <v-col class="py-0 pr-0">
                            <v-text-field
                              v-model.number="formData.sgl"
                              dense
                              type="number"
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">SGL</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.twn"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">TWN</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.trp"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">TRP</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.dbl"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">DBL</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.honeymood"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">HNM</v-col>
                          <v-col class="pa-0">
                            <v-text-field
                              v-model.number="formData.tl"
                              type="number"
                              dense
                              >
                            </v-text-field>
                          </v-col>
                          <v-col class="pa-0">TL</v-col>
                        </v-row>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
              </v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <v-row justify="space-between">
                  <span>客户信息</span>
                  <v-btn outlined color="indigo" @click="showSelectCustom = true">
                    <v-icon>mdi-account</v-icon>
                    选择客户
                  </v-btn>
                </v-row>
              </v-expansion-panel-header>
              <v-divider />
              <v-expansion-panel-content>
                <v-row align="center" class="pt-3">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right"><small class="red--text mr-1">({{$t('other.required')}})</small>客户名称：</div>
                      <v-col class="pa-0">
                        <v-text-field
                          v-model="formData.company_name"
                          dense
                          :rules="[rules.required]"
                          required
                          >
                        </v-text-field>
                      </v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0"></v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">联系人：</div>
                      <v-col class="pa-0">
                        <v-text-field
                          v-model="formData.operator_a"
                          clearable
                          >
                        </v-text-field>
                      </v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">联系电话：</div>
                      <v-col class="pa-0">
                        <v-text-field
                          v-model="formData.operator_a_phone"
                          clearable
                          >
                        </v-text-field>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">甲方团号：</div>
                      <v-col class="pa-0">
                        <v-text-field
                          v-model="formData.code_a"
                          clearable
                          >
                        </v-text-field>
                      </v-col>
                    </v-row>
                  </v-col>
                  <v-col cols="6" class="py-0">
                    <v-row align="center">
                      <div style="width: 140px;" class="text-right">客源地：</div>
                      <v-col class="pa-0">
                        <v-text-field
                          v-model="formData.source"
                          clearable
                          >
                        </v-text-field>
                      </v-col>
                    </v-row>
                  </v-col>
                </v-row>
                <!-- <v-row align="center">
                  <div style="width: 140px;" class="text-right">接机牌：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row> -->
              </v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>
                <v-row justify="space-between">
                  <span>团费信息</span>
                  <SelectTourfee :selected="selected" @change="handleChangeTourfee"/>
                </v-row>
              </v-expansion-panel-header>
              <v-divider />
              <el-table
                :data="tourfeeData"
                :summary-method="getSummaries"
                show-summary>
                <el-table-column
                  label="费用项目"
                  prop="name"
                  width="240">
                  <template slot="header">
                    <span class="mr-1">费用项目</span>
                    <small class="red--text">({{$t('other.required')}})</small>
                  </template>
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model="row.project_name"
                      outlined
                      single-line
                      hide-details
                      dense
                      :rules="[rules.required]"
                      required
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="price"
                  label="单价">
                  <template slot="header">
                    <span class="mr-1">单价</span>
                    <small class="red--text">({{$t('other.required')}})</small>
                  </template>
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model.number="row.price"
                      type="number"
                      outlined
                      single-line
                      hide-details
                      dense
                      :rules="[rules.required]"
                      required
                      @input="inputTourfeeItem(row)"
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="num"
                  label="数量">
                  <template slot="header">
                    <span class="mr-1">数量</span>
                    <small class="red--text">({{$t('other.required')}})</small>
                  </template>
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model.number="row.count"
                      type="number"
                      outlined
                      single-line
                      hide-details
                      dense
                      :rules="[rules.required]"
                      required
                      @input="inputTourfeeItem(row)"
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  width="180"
                  prop="price_total"
                  label="合计金额">
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model="row.price_total"
                      outlined
                      single-line
                      hide-details
                      dense
                      readonly
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="remark"
                  label="备注">
                  <template slot-scope="{ row }">
                    <v-text-field
                      v-model="row.remark"
                      outlined
                      single-line
                      hide-details
                      dense
                    ></v-text-field>
                  </template>
                </el-table-column>
                <el-table-column
                  fixed="right"
                  :label="$t('other.action')"
                  width="80">
                  <template slot-scope="{ $index }">
                    <v-btn small color="warning" outlined @click="handleRmoveTourfee($index)">{{ $t('actions.delete') }}</v-btn>
                  </template>
                </el-table-column>
              </el-table>
              <v-row align="center">
                <div style="width: 140px;" class="text-right">团费说明：</div>
                <v-col class="pa-0">
                  <v-textarea
                    v-model="formData.detail.outlay"
                    counter
                    rows="2"
                    no-resize
                    clearable
                    >
                  </v-textarea>
                </v-col>
              </v-row>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>购物与自费</v-expansion-panel-header>
              <v-divider />
              <v-expansion-panel-content>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">购物安排：</div>
                  <v-col class="pa-0">
                    <DictCombobox v-model="formData.detail.shoppingArr" type="shopping" multiple/>
                    <!-- <v-combobox
                      v-model="select"
                      :items="items"
                      multiple
                    ></v-combobox> -->
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">自费项目：</div>
                  <DictCombobox v-model="formData.detail.self_costArr" type="selfcost" multiple/>
                </v-row>
              </v-expansion-panel-content>
            </v-expansion-panel>

            <v-expansion-panel readonly>
              <v-expansion-panel-header hide-actions>事项备注</v-expansion-panel-header>
              <v-divider />
              <v-expansion-panel-content>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">订房备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.room_remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">订车备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.car_remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">订餐备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.restaurant_remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">景点备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.scenery_remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">导游备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.guide_remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">结账单备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.checkout_remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
                <v-row align="center">
                  <div style="width: 140px;" class="text-right">其它备注：</div>
                  <v-col class="pa-0">
                    <v-textarea
                      v-model="formData.detail.remark"
                      counter
                      rows="2"
                      no-resize
                      clearable
                      >
                    </v-textarea>
                  </v-col>
                </v-row>
              </v-expansion-panel-content>
            </v-expansion-panel>
          </v-expansion-panels>
        </v-card-text>
      </v-card>
    </v-form>
    <v-footer
      fixed
      style="background: transparent"
    >
      <v-row justify="center" class="py-2">
        <v-btn class="mr-8" @click="$router.back()">返回</v-btn>
        <v-btn color="info" class="mr-8" @click="handleSave(1)">预留占位</v-btn>
        <v-btn color="primary" @click="handleSave(2)">确认订单</v-btn>
      </v-row>
    </v-footer>
    <SelectCustom :show.sync="showSelectCustom" @selection="handleChangeCustom"/>
  </div>
</template>

<script>
import * as planApi from '@/api/plan'
import { addSpOrder } from '@/api/group'
import SelectGroupcode from '../components/select-groupcode'
import SelectTourfee from '../components/select-tourfee'
import SelectCustom from '../components/select-custom'
import dayjs from 'dayjs'
export default {
  components: {
    SelectGroupcode,
    SelectTourfee,
    SelectCustom
  },
  created() {
    this.setId()
  },
  activated() {
    console.log(1)
    this.setId()
  },
  data() {
    return {
      id: undefined,
      detailData: '',

      showSelectCustom: false,
      panel: [0, 1, 2, 3, 4, 5],
      
      formData: {
        code_sign1: '',
        adult_num: '',
        bedkid_num: '',
        leader_num: '',
        order_date: '',
        company_id: undefined,
        code_a: '',
        company_name: '',
        operator_a: '',
        source: '',
        telphone: '',
        sgl: '',
        twn: '',
        trp: '',
        dbl: '',
        honeymood: '',
        tl: '',
        detail: {
          outlay: '',
          room_remark: '',
          car_remark: '',
          remark: '',
          checkout_remark: '',
          shoppingArr: [],
          self_costArr: []
        }
      },

      rules: {
        required: value => !!value || 'required',
      },

      tourfeeData: [],
    }
  },
  computed: {
    selected: {
      get() {
        return this.tourfeeData
      }
    }
  },
  methods: {
    dayjs,
    setId() {
      this.id = this.$route.query.id
      this.getDetail()
    },
    // 计算合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        if (index === 4 || index === 1 || index === 2) {
          sums[index] = '';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        } else {
          sums[index] = '';
        }
      });

      return sums;
    },

    // 设置客户信息
    setCompany(data) {
      this.formData.company_id = data.company_id
      this.formData.company_name = data.company_name
      this.formData.operator_a = data.operator_a
      this.formData.source = data.source
      this.formData.operator_a_phone = data.operator_a_phone
    },
    getDetail() {
      planApi.getDetail({id: this.id}).then(res => {
        this.detailData = res.data
        let company = res.data?.product?.company
        this.setCompany({
          // company_id: company.id,
          company_name: company.name,
          operator_a: company.contact,
          operator_a_phone: company.telphone,
          source: company.source
        })
      })
    },

    // 添加费用项目
    handleChangeTourfee(selection) {
      this.tourfeeData.push(...selection.map(item => {
        return {
          id: undefined,
          project_name: item.name,
          currency: 'CNY',
          price: '',
          count: '',
          price_total: '',
          remark: ''
        }
      }))
    },

    // 删除费用项目
    handleRmoveTourfee(index) {
      this.tourfeeData.splice(index, 1)
    },

    handleSave(type) {
      console.log(this.formData, this.tourfeeData)
      // addSpOrder
      if(this.$refs.form.validate()) {
        this.formData.foundation_prodcut_name = this.detailData.foundation_prodcut_name
        this.formData.status = type
        this.formData.plan_date = this.detailData.plan_date
        this.formData.day_num = this.detailData.day_num
        this.formData.planBudget = this.tourfeeData
        addSpOrder(this.formData).then(res => {
          console.log(res)
        })
      }
    },

    // 费用项目 计算总金额
    inputTourfeeItem(row) {
      row.price_total = (row.price || 0) * (row.count || 0)
    },

    // 选择客户更改时
    handleChangeCustom(selection) {
      this.setCompany({
        company_id: selection.id,
        company_name: selection.name,
        operator_a: selection.contact,
        source: selection.source,
        operator_a_phone: selection.telphone
      })
    }
  }
}
</script>

<style>

</style>